import React, { PropTypes } from 'react';
import $ from 'jquery';

// import {data} from '../data/topic.json';
import Header from '../components/header.jsx';
import Reply from '../components/reply.jsx';
import Empty from '../components/empty.jsx';
import Loading from '../components/loading.jsx';

import { browserHistory } from 'react-router'
import {getLastTimeStr, getTabClassName ,getTabStr } from '../libs/utils';

const propTypes = {
  id: PropTypes.string,
  text: PropTypes.string,
};

const defaultProps = {
  text: 'Hello World',
};

class Topic extends React.Component {
  constructor(props) {
    super(props);
    console.log(props)
    this.state = {
    	data:undefined,
      id:props.params.id
    }
    // browserHistory.push('/some/path');
    // return false;
  }
  static methodsAreOk() {
    return true;
  }
  componentWillMount() {
    console.log('componentWillMount');
    return false;
  }
  componentDidMount() {
    console.log('componentDidMount');
    $.ajax('https://cnodejs.org/api/v1/topic/'+this.props.params.id).success((data)=>{
      // console.log(data);
      console.log(data);
      this.setState({
        data:data.data,
      })
    }).error(function(error) {
      console.log(error)
    });
    return false;
  }
  componentWillReceiveProps() {
    console.log('componentWillReceiveProps');
    return false;
  }
  shouldComponentUpdate() {
    return true;
  }
  componentWillUpdate() {
    console.log('componentWillUpdate');
    return false;
  }
  componentDidUpdate() {
    console.log('componentDidUpdate');
    // return false;
  }
  componentWillUnmount() {
    console.log('componentWillUnmount');
    // return false;
  }
  clickHandlers() {
    console.log('clicked');
    // return false;
  }
  addReply(id) {
    // ;alert(id)
    //todo 优化直接过滤掉相同id
    if (id===this.state.reply_id) {
      id=''
    }
    this.setState({
      reply_id:id,
    })
  }
  render() {
  	console.log(this.state.data)
    let data = this.state.data;
    if (typeof this.state.data ==='undefined') {
      return (
        <div>
        <Header></Header>
        </div>
      );
    } else
    return (
    	<div>
		    <Header></Header>
		    {typeof this.state.data.id !=='string'?<EmptyTopic/>:(
          <div id="page">

		        <h2 className="topic-title">{data.title}</h2>
		        <section className="author-info">
		            <img className="avatar" src={data.author.avatar_url} />
		            <div className="col">
		                <span>{data.author.loginname}</span>
		                <time>
		                    发布于:{getLastTimeStr(data.create_at,true)}
		                </time>
		            </div>
		            <div className="right">
		                <span 
		                        className={getTabClassName(data.tab, data.good, data.top)+' tag'}>
		                        {getTabStr(data.tab, data.good, data.top)}
		                </span>
		                <span className="name">{data.visit_count}次浏览</span>
		            </div>
		        </section>

		        <section className='markdown-body topic-content' dangerouslySetInnerHTML={{__html:data.content}}></section>

		        <h3 className="topic-reply">
		            <strong>{data.reply_count}</strong> 回复
		        </h3>
            <section className="reply-list">
		            <ul>
		            	{
		            		data && this.state.data.replies.map(function(item, i) {
		            			return (
		            				<li key={item.id}>
		            					<section className="user">
		            						<img src={item.author.avatar_url} alt="" className="head"/>
		            						<div className="info">
		            							<span className="cl">
			            							<span className="name">{item.author.loginname}</span>
			            							<span className="name mt10">
				            							<span></span>
				            							发布于:{getLastTimeStr(item.create_at,true)}
			            							</span>
		            							</span>
		            							<span className="cr">
		            							<span className="iconfont icon">&#xe608;</span>
		            							{item.ups.length} 
		            							<span className="iconfont icon" onClick={this.addReply.bind(this,item.id)}>&#xe609;</span>
		            							</span>
		            						</div>
		            					</section>
		            					<div className="reply_content" dangerouslySetInnerHTML={{__html:item.content}}></div>
		            					{this.state.reply_id===item.id?(<Reply topicId={''} replyId={item.id} replyTo={item.author.loginname}/>):<Empty/>}
		            				</li>
		            			)
		            		},this)
		            	}
		            </ul>
		        </section>
		        <Reply topicId={''} replyId={''} />

		      </div>)
        }
  		</div>
    );
  }
}


class EmptyTopic extends React.Component {
  constructor(props) {
    super(props);
    // return false;
  }
  static methodsAreOk() {
    return true;
  }
  componentWillMount() {
    console.log('componentWillMount');
    return false;
  }
  componentDidMount() {
    console.log('componentDidMount');
    return false;
  }
  componentWillReceiveProps() {
    console.log('componentWillReceiveProps');
    return false;
  }
  shouldComponentUpdate() {
    return false;
  }
  componentWillUpdate() {
    console.log('componentWillUpdate');
    return false;
  }
  componentDidUpdate() {
    console.log('componentDidUpdate');
    // return false;
  }
  componentWillUnmount() {
    console.log('componentWillUnmount');
    // return false;
  }
  clickHandlers() {
    console.log('clicked');
    // return false;
  }
  render() {
    return (
    	<div className='no-data'>
	        <i className="iconfont icon-empty">&#xe60a;</i>
	        该话题不存在!
		</div>);
  }
}


Topic.propTypes = propTypes;
Topic.defaultProps = defaultProps;

export default Topic;